<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.main-work-top {
				width: 200px;
				border: solid 1px darkgray;
				padding: 5px;
				margin-bottom: 5px;
			}

			.main-work-bottom {
				border: solid 1px darkgray;
				width: 210px;
			}

			.main-box ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}

			.main-box li {
				margin-bottom: 5px;
				padding-left: 10px;
			}

			.main-box li:hover {
				background-color: coral;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="main clearfix">
				<div class="main-box left">
					<!-- 自定义的 Vue 组件 -->
					<main-work></main-work>
				</div>
			</div>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			// 定义名为'main-work'的Vue组件
			Vue.component('main-work', {
				// 组件的模板
				template: `
                <div class="main-work">
                    <div class="main-work-top clearfix">
                        <div class="selection-show" @click="showSelectListFunc">
                            <span>{{input}}</span>
                            <!-- <div class="arrow"></div> -->
                        </div>
                    </div>
                    <main-work-list
                        v-on:setvalue="setvalue"
                        v-bind:show="showSelectList"
                    ></main-work-list>
                </div>
            `,
				// 组件的数据
				data: function() {
					return {
						input: '请选择课程', // 初始输入文本
						showSelectList: false, // 控制选择列表的显示状态
						value: "",
						isShow: false,
						spanDownShow: true,
						spanUpShow: false
					}
				},
				// 组件的方法
				methods: {
					showSelectListFunc: function() {
						// 点击触发，切换选择列表的显示状态
						this.showSelectList = true;
					},
					hideSelectListFunc: function() {
						// （未被使用）隐藏选择列表
						this.showSelectList = false;
					},
					setvalue: function(list, show) {
						// 处理从子组件接收的值，更新输入文本和显示状态
						this.input = list;
						this.showSelectList = !show;
					}
				}
			})

			// 定义名为'main-work-list'的Vue组件
			Vue.component('main-work-list', {
				// 组件的模板
				template: `
                <ul
                    class="main-work-bottom"
                    v-show="show"
                >
                    <li
                        v-for="list in lists"
                        v-on:click="selectList(list)"
                    >{{list}}</li>
                </ul>
            `,
				// 接收来自父组件的属性
				props: ['show'],
				// 组件的数据
				data: function() {
					return {
						lists: [
							'HTML5',
							'node.js',
							'JavaScript',
							'Vue',
						] // 可供选择的列表项
					}
				},
				// 组件的方法
				methods: {
					selectList: function(list) {
						// 点击列表项时，向父组件触发'setvalue'事件，并传递相关数据
						this.$emit('setvalue', list, this.show);
					}
				}
			})

			// 创建Vue实例并挂载到'id'为'app'的元素上
			var app = new Vue({
				el: '#app',
				data: {} // 此处未定义具体数据
			})
		</script>

	</body>
</html>